<template>
  <NavBar />
  <van-tree-select
    v-model:main-active-index="activeIndex"
    height="100%"
    :items="items"
    @click-nav="clickNavTest"
  >
    <template #content>
      <div class="card" v-for="item in list" @click="toCourseCatalogueHandle(item.name)">
        <img :src="item.url" alt=""/>
        <div class="content">
          <div class="title">{{ item.name }}</div>
          <div class="price">
            <span class="now-price">￥136.00</span>
            <span class="before-price">￥136.00</span>
          </div>
          <div class="desc">
            <span style="color: #333333">3030人购买</span>
          </div>
        </div>
      </div>
    </template>
  </van-tree-select>
</template>

<script>
import { getMaterialList } from "@/api/material";
import { reactive, toRefs } from "vue";
// import {useRoute} from "vue-router";
import {Toast} from "vant"
import NavBar from "@/components/layout/nav-bar";
export default {
  components: {NavBar},
  setup() {
    // 路由参数
    // const route = useRoute()
    const state = reactive({
      loading: false,
      finished: false,
      activeIndex: 0,
      items: [{ text: '全部',id: null,children: [] }],
      list: [],
    });

    // onBeforeMount(async ()=>{
    //   await http.get('/education/categoryTree/'+dictDataId)({params:{'categoryType': route.name}}).then(({ data:res })=>{
    //     if (res.code !== 0){
    //       return Toast.fail(res.msg)
    //     }
    //     let newData = JSON.parse(JSON.stringify(res.data).replace(/name/g, "text"));
    //     state.items = state.items.concat(newData);
    //     if (state.activeIndex ===0){
    //      clickNavTest(0)
    //     }
    //   })
    // })

    const clickNavTest=((index)=>{
      state.activeIndex = state.items[index].id;
      getMaterialList({params:{ 'categoryId' : state.activeIndex }}).then(({ data:res })=>{
        if (res.code !== 0){
          return Toast.fail(res.msg)
        }
        state.list = res.data;
      })
    })

    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     state.list.push(state.list.length + 1);
      //   }

        // 加载状态结束
        state.loading = false;

        // 数据全部加载完成
      //   if (state.list.length >= 40) {
      //     state.finished = true;
      //   }
      // }, 1000);
    };
    return {
      ...toRefs(state),
      clickNavTest,
      onLoad
    }
  }
}
</script>

<style lang="less" scoped>

.van-tree-select {
  position: absolute;
  width: 100%;
}

.van-tree-select /deep/ .van-tree-select__nav{
 flex: 0.85;
}
.van-tree-select /deep/ .van-tree-select__content{
 flex: 2.15;
}

.card {
  background-color: white;
  //box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  //border-radius: 4px;
  margin: 10px 5px;
  display: flex;
  img {
    height: 5rem;
    width: 7rem;
  }
  .content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 5px 5px 5px 10px;
    .title {
      font-size: 14px;
    }
    .desc {
      font-size: 12px;
    }
    .price {
      .now-price {
        font-size: 16px;
        color: #ed5a65
      }
      .before-price{
        font-size: 12px;
        text-decoration:line-through;
        color: #BFBFBF
      }
    }
  }

}

</style>
